import {  Component} from "react";

class App extends Component{
/**
 * 延迟更新状态的说明：

- 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）

- 如果多次调用 setState 更新状态，**状态会进行合并，后面覆盖前面**

- 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新
 */
  state={
    count:1
  }
  add=()=>{
    this.setState({
      count:this.state.count+1
    })
    this.setState({
      count:this.state.count+1
    },
    () => {console.log('更新后2',this.state.count)})
    this.setState({
      count:this.state.count+2
    },
    () => {console.log('更新后3',this.state.count)}
    )
    console.log('上一次的',this.state.count);
  }

  add2=()=>{
    this.setState((prevState)=>{
      return{
        count:prevState.count+1
      }
    })
    this.setState((prevState)=>{
      return{
        count:prevState.count+1
      }
    },
    () => {console.log('更新后2',this.state.count)})
    this.setState((prevState)=>{
      return{
        count:prevState.count+2
      }
    },
    () => {console.log('更新后3',this.state.count)})
    console.log(this.state.count);
  }
  render(){
    return(
      <div>
        <h1>setState进阶</h1>
        <hr />
        <ul>
          <li>{this.state.count}</li>
          <li><button onClick={this.add}>btn</button></li>
          <li><button onClick={this.add2}>btn2</button></li>
        </ul>
      </div>
    )
  }
}

export default App